<template>
	<div class="content-cont">
    <databox :title="'安置点简介'" :dheight="200" :icon="'account'" :boxb="false">
      <p class="introduce" v-html="pointStatistic.discription"></p>
    </databox>
		<div class="top-box">
			<div class="left">
				<dnumber
				:dheight="110"
				:title="'房间数'"
				:size="'4rem'"
				:dnumber="pointStatistic.roomCount"
				:icon="'kucunguanli'"
				:color="'#ffff43'"
				>
			    </dnumber>
			</div>
			<div class="right">
				<div class="content">
					<dnumber
						:dheight="110"
						:title="'住户'"
						:size="'3rem'"
						:dnumber="pointStatistic.homeCount"
						:icon="'jindu1'"
						:color="'#25f3e6'"
						>
					    </dnumber>
					    <dnumber
						:dheight="110"
						:title="'人员'"
						:size="'3rem'"
						:dnumber="pointStatistic.personTotal"
						:icon="'success'"
						:color="'#f84a4a'"
						>
					    </dnumber>
				</div>
			</div>
		</div>
		<div class="content-box">
			<databox :title="'安置点统计'" :dheight="370" :icon="'account'">
        <ve-bar :data="pointStatisticData" :settings="chartSettings" :extend="extend"></ve-bar>
			</databox>
		</div>
	</div>
</template>

<script>
import dnumber from './dnumber'
import myevent from './myevent'
export default {
  components:{
  	dnumber,
  	myevent
  },
  props: {
    pointStatistic:Object,
  },
  data () {
    this.chartSettings={
      dimension: ['名称'],
      metrics: ['数量']
    }
    this.extend = {
      series: {
        label: {
          normal: {
            show: true
          }
        }
      },
      legend:{
        textStyle: {color: '#fff'},
        right: '6%',
        show:false,
      },
      yAxis:
        {
          axisLabel: {
            textStyle: {
              color: '#fff'
            }
          }
        },
      xAxis:
        {
          axisLabel: {
            textStyle: {
              color: '#fff'
            }
          }
        }
    }
    return{

    }
  },
  methods:{
  },
  watch:{
  },
  computed:{
    pointStatisticData: function(){
      return {
        columns: ['名称', '数量'],
        rows: [
          { '名称': '党员', '数量': this.pointStatistic.partyMemeber_count},
          { '名称': '劳动力', '数量': this.pointStatistic.labor_count},
          { '名称': '学生', '数量': this.pointStatistic.student1_count+this.pointStatistic.student2_count+this.pointStatistic.student3_count+this.pointStatistic.student4_count},
          { '名称': '留守儿童', '数量': this.pointStatistic.leftBehindchild_count},
          { '名称': '留守妇女', '数量': this.pointStatistic.leftBehindWoman_count},
          { '名称': '留守老人', '数量': this.pointStatistic.restOldMan_count},
          { '名称': '60—80岁人口', '数量': this.pointStatistic.oldMan_60_count},
          { '名称': '社会保障人口', '数量': this.pointStatistic.baseLivingAllowance_village_count+this.pointStatistic.baseLivingAllowance_city_count}
        ]
      }
    }
  }
}
</script>

<style lang="scss">
  .introduce{
    font-size: 14px;
    color:#f84a4a;
    text-indent:35px;
  }
.content-cont{
	width: 100%;
	height: 100%;
	.top-box{
		display: flex;
		width: 100%;
		height: 110px;
		overflow: hidden;
		.left{
			width: 1/3 * 100%;
			 background: rgba(35,72,135,0.4);
		}
		.right{
			flex: 1;
			padding-left: 15px;
			.content{
				width: 100%;
		        height: 100%;
		        background: rgba(35,72,135,0.4);

				.number-box{
					width: 50%;
					float: left;
				}
			}
		}
   }
   .content-box{
   	padding-top: 30px;
   }
}
</style>
